<div class="datalist" *ngIf="dataList.length>0">
    <table class="table table-striped table-bordered table-advance table-hover">
        <thead>
            <tr>
                <th class="text-center">
                    <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input name="btSelectAll" (change)="changeAll($event)" type="checkbox"><span></span></label> </th>
                <th class="hidden-xs"> 名称 </th>
                <th> 类型 </th>
                <th> 操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of dataList">
                <td class="highlight text-center">
                    <img *ngIf="'.jpg,.jpeg,.png,.bmp'.indexOf(item.ext)!=-1" [src]="item.fullPath" class="hidden" alt="" />
                    <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" [(ngModel)]="item.checked"  /><span></span></label>
                </td>
                <td class="hidden-xs">
                    <i class="fa" [ngClass]="item.typeIcon"></i> {{item.name}} </td>
                <td>
                    {{item.typeName}}
                </td>
                <td class="text-center">
                    <button *ngIf="item.type!='up'" class="btn blue btn-outline" (click)="showDialog(item.name)">重命名</button>
                    <button *ngIf="item.type=='up'" class="btn red" (click)="openFolder($event,item)">返回</button>
                    <button *ngIf="item.type=='dir'" class="btn blue" (click)="openFolder($event,item)">打开</button>
                    <button *ngIf="'.jpg,.jpeg,.png,.bmp,.gif'.indexOf(item.ext)!=-1" (click)="imagePreview($event,item)" class="btn yellow">预览</button>
                    <a *ngIf="'.js,.css,.html,.cshtml'.indexOf(item.ext)!=-1" [routerLink]="[editLink]" [queryParams]="{path:path,filename:item.name,id:id}" class="btn green">编辑</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="nodata" *ngIf="dataList.length==0">
    <div class="alert alert-info">
        <i class="fa fa-info-circle fa-fw fa-2x"></i> 没有{{appServ.pageTitle}}数据
    </div>
</div>
<p-overlayPanel #imgPreview appendTo="body">
    <img [src]="imgUrl" class="img-thumbnail preview" />
</p-overlayPanel>

<p-dialog [header]="dialogInfo.title" [(visible)]="dialogInfo.display" modal="modal" width="300" [responsive]="true">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" novalidate>
        <div class="form-group">
            <input type="text" #inputNewName="ngModel" pattern="^(\w)+((\.?\w+)+)$" [(ngModel)]="dialogInfo.newName" name="newName" minlength="2" maxlength="100" class="form-control" placeholder="输入名称" required/>
            <div class="alert alert-danger mg-t-10" *ngIf="!inputNewName?.valid&&!inputNewName?.pristine">
                请使用2-50位的字母和数字
            </div>
        </div>
    </form>
    <p-footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" class="btn btn-danger" (click)="dialogInfo.display=false"> <i class="fa fa-check"></i> 取消</button>
            <button type="button" class="btn green" [disabled]="!editForm.form.valid" (click)="closeDialog($event)"> <i class="fa fa-check"></i> 确定</button>
        </div>
    </p-footer>
</p-dialog>